<template>
	<section>
		<!--查询工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="部门名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>


		<!--列表  data:列表展示的数据    v-loading:打开加载效果  -->
		<el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="部门名称"  sortable>
			</el-table-column>
			<el-table-column prop="state" label="部门状态" :formatter="formatSex" sortable>
			</el-table-column>
			<el-table-column prop="sn" label="部门编号"  sortable>
			</el-table-column>
			<el-table-column prop="dirPath" label="层级目录"  sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination @size-change="handleSizeChange" layout="sizes,prev, pager, next" @current-change="handleCurrentChange"  :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>


		<!--新增或修改的弹出框
			rules：表单校验 的规则
		-->
		<el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="部门名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="addForm.state">
						<el-radio class="radio" :label="0">启用</el-radio>
						<el-radio class="radio" :label="-1">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="部门编号" prop="sn">
					<el-input v-model="addForm.sn" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="层级目录">
					<el-input  v-model="addForm.dirPath"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
export default {
	data(){
	    return{
            departments:[],
            listLoading:true,
            sels: [],//列表选中列
            total:0,
			currPage:1,
			pageSize:10,
            filters:{
                name:''
			},
			//是否显示模态框
            addFormVisible:false,
			//打开加载效果
            addLoading:false,
            addForm:{
				state:0,
				name:'',
				dirPath:'',
				sn:''
			},
            addFormRules:{//规则详情
                name: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' },
                    { min: 2, message: '部门名称不能小于两个字符', trigger: 'blur' }
                ],
			},
			title:''
		}
	},
	methods:{

        //新增或修改的提交数据方法
        addSubmit(){
            //打开加载效果
            this.addLoading=true;
            this.$refs.addForm.validate((valid) => {
                if (valid) {//如果通过验证  发起后台的请求添加数据
					this.$http.put("/dept",this.addForm).then((res)=>{
						let {success,message} =res.data;
						if(success){
                            this.$message({
                                message: message,
                                type: 'success'
                            });
						}else {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
						}
						//关闭 模态框
						this.addFormVisible=false;
						//重新加载列表
						this.loadListData();
					})
                }
            })
			//关闭加载效果
            this.addLoading=false;
		},
	    search(){
	      //高级查询的时候 默认的当前页从第一页开始查询
			this.currPage=1;
			//重新加载列表数据
			this.loadListData();
		},
	    //添加绑定的方法
        handleAdd(){
            this.title='新增';
            //清空表单 版本一：
            // this.addForm.name='';
            // this.addForm.sn='';
            // this.addForm.dirPath='';
            // this.addForm.state=0;

			//清空表单 版本二：
           	//this.addForm = Object.assign({});
            //让单选按钮有初始值
            //this.addForm.state=0;

			//清空表单 版本三：
			for( var i in this.addForm){
			    //console.debug(i)
				this.addForm[i]=''
			}
			//让单选按钮有初始值
            this.addForm.state=0;

			//addFormVisible 设置为true
			this.addFormVisible=true;

		},

        handleSizeChange(val){//监听用户选择哪一个展示的值
			this.pageSize=val;
            //重新发起请求加载数据
            this.loadListData();
		},
	    //用来监听分页动作
        handleCurrentChange(val){//val 当前的页码
			this.currPage=val;
			//重新发起请求加载数据
			this.loadListData();
		},
	    //批量删除
        batchRemove(){


		},
	    // 监听用户选中行
        selsChange: function (sels) {
            this.sels = sels;
        },
		//编辑事件
        handleEdit(index,row){
            //回显数据
            for( var i in this.addForm){
                //console.debug(row[i])
                this.addForm[i]=row[i];
            }
            //设置id属性
            this.addForm.id=row.id;
            //显示弹出框
			this.addFormVisible=true;

		},
		//删除绑定的事件
        handleDel(index,row){
            this.$confirm('确认删除该记录吗?', '提示', {
                type: 'warning'
            }).then(()=>{
                this.listLoading=true;
				//发起后台的请求  删除数据
				this.$http.delete("/dept/"+row.id).then((res)=>{
				    //解构表达式
					let {success,message}=res.data;
					if(success){
                        this.$message({
                            message: message,
                            type: 'success'
                        });
					}else {
                        this.$message({
                            message: '网络异常',
                            type: 'error'
                        });
					}

					//重新加载列表
					this.loadListData();
				})

			})
		},
        //性别显示转换
        formatSex(row, column) {
            return row.state == 0 ? '启用' : row.state == -1 ? '禁用' : '未知';
        },
		//加载列表数据
		loadListData(){
            //组装请求的数据
			let param = {
				currentPage:this.currPage,
				pageSize:this.pageSize,
				keywords:this.filters.name
			}
			//发送axios 请求
			this.$http.post("/dept",param).then((res)=>{
			    console.debug(res)
				//给上面的departments赋值
				this.departments = res.data.data;
				this.total =res.data.total;
				//关闭加载效果
				this.listLoading=false;
			})
		}
	},
	mounted(){//钩子方法
		this.loadListData();
	}



}

</script>